<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8" />
    <title>用户管理_资源共享平台</title>
    <link rel="stylesheet" href="/layui/css/layui.css"/>
</head>
<body>
<div style="padding: 20px">
    <span class="layui-breadcrumb">
        <a>首页</a>
        <a><cite>用户管理</cite></a>
    </span>
    <div style="padding-top: 20px;">
        <div class="layui-form">
            <div class="layui-inline">
                <label class="layui-form-label">用户名：</label>
                <div class="layui-input-inline">
                    <input type="text" id="username" name="username" placeholder="请输入" autocomplete="off" class="layui-input" />
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">邮箱：</label>
                <div class="layui-input-inline">
                    <input type="text" id="email" name="email" placeholder="请输入" autocomplete="off" class="layui-input" />
                </div>
            </div>
            <div class="layui-inline" style="margin-left: 20px;">
                <button class="layui-btn" lay-submit="" lay-filter="*">
                    <i class="layui-icon layui-icon-search"></i>
                </button>
            </div>
        </div>
        <table width="100%" id="userListTable" lay-filter="userListTable"></table>
    </div>
</div>

<script type="text/html" id="vipSwitchTpl">
    {{#  if(d.vip){ }}
    <input type="checkbox" name="{{d.id}}" value="{{d.vip}}" lay-skin="switch" lay-filter="vipSwitch" lay-text="&nbsp;是&nbsp;|&nbsp;否&nbsp;" checked="" />
    {{#  } else { }}
    <input type="checkbox" name="{{d.id}}" value="{{d.vip}}" lay-skin="switch" lay-filter="vipSwitch" lay-text="&nbsp;是&nbsp;|&nbsp;否&nbsp;"/>
    {{#  } }}
</script>
<script type="text/html" id="statusSwitchTpl">
    {{#  if(d.status){ }}
    <input type="checkbox" name="{{d.id}}" value="{{d.status}}" lay-skin="switch" lay-filter="offSwitch" lay-text="&nbsp;是&nbsp;|&nbsp;否&nbsp;" checked="" />
    {{#  } else { }}
    <input type="checkbox" name="{{d.id}}" value="{{d.status}}" lay-skin="switch" lay-filter="offSwitch" lay-text="&nbsp;是&nbsp;|&nbsp;否&nbsp;" />
    {{#  } }}
</script>
<script type="text/html" id="toolTpl">
    <button class="layui-btn layui-btn-xs layui-btn-warm" lay-event="resetPassword"><i class="layui-icon layui-icon-edit"></i>重置密码</button>
    <button class="layui-btn layui-btn-xs layui-btn-normal" lay-event="addPoints"><i class="layui-icon layui-icon-edit"></i>充值积分</button>
</script>

<script src="/layui/layui.js"></script>
<script src="/js/common.js"></script>
<script type="text/javascript" th:inline="javascript">
    /*<![CDATA[*/
    let $, layer, table;
    layui.use(['layer', 'form', 'table'], function () {
        $ = layui.jquery,
            layer = layui.layer,
            table = layui.table;
        let form = layui.form;

        table.render({
            elem: '#userListTable',
            url: '/admin/user/list',
            headers: {'Cache-Control':'no-cache'},
            cols: [[
                {type: 'checkbox'},
                {field: 'username', title: '用户名'},
                {field: 'email', title: '邮箱'},
                {field: 'registerDate', title: '注册时间'},
                {field: 'points', width: 100, title: '积分', align: 'center'},
                {field: 'isVip', width: 100, title: 'VIP会员', align: 'center', templet: '#vipSwitchTpl'},
                {field: 'status', width: 100, title: '封禁', align: 'center', templet: '#statusSwitchTpl'},
                {field: 'action', width: 200, title: '操作', align: 'center', templet: '#toolTpl'}
            ]],
            page: true
        });

        $("#username, #email").on("keydown", function (e) {
            if (e.key === 'Enter') {
                search();
            }
        });

        // 监听提交
        form.on('submit(*)', function (data) {
            search();
        });

        // 触发单元格工具事件
        table.on('tool(userListTable)', function (obj) {
            let data = obj.data;
            switch (obj.event) {
                case 'resetPassword': // 重置密码
                    resetPassword(data.id);
                    break;
                case 'addPoints': // 充值积分
                    addPoints(data.id);
                    break;
            }
        });
    });

    function search() {
        table.reload("userListTable", {
            page: {
                curr: 1
            },
            where: {
                username: $("#username").val(),
                email: $("#email").val()
            }
        });
    }

    function resetPassword(id) {
        layer.confirm('您确定要对用户进行重置密码吗？', {
            title: "系统提示",
            btn: ['确定', '取消']
        }, function () {
            layer.closeAll('dialog');
            $.post("/admin/user/resetPassword", {"id": id}, function (result) {
                if (result.success) {
                    layer.msg("重置成功！");
                } else {
                    layer.msg("重置失败，请联系管理员！");
                }
            }, "json");
        }, function () {

        });
    }

    function addPoints(id) {
        layer.open({
            type: 2,
            title: '充值积分',
            area: ['400px', '300px'],
            content: '/admin/user/addPoints/' + id
        });
    }
    /*]]>*/
</script>
</body>
</html>